import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row和Column示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const RowColumnDemoPage(),
    );
  }
}

class RowColumnDemoPage extends StatelessWidget {
  const RowColumnDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Row和Column布局示例')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Row示例
            Text(
              'Row示例：',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),

            // 第一个Row - 默认居中对齐
            Container(
              color: Colors.grey[200],
              padding: EdgeInsets.all(8),
              child: Row(
                children: <Widget>[
                  Text(" hello world ", style: TextStyle(fontSize: 30.0)),
                  Text(" I am Jack "),
                ],
              ),
            ),
            SizedBox(height: 10),

            // 第二个Row - mainAxisSize.min
            Container(
              color: Colors.grey[200],
              padding: EdgeInsets.all(8),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(" hello world ", style: TextStyle(fontSize: 30.0)),
                  Text(" I am Jack "),
                ],
              ),
            ),
            SizedBox(height: 10),

            // 第三个Row - 从右到左排列
            Container(
              color: Colors.grey[200],
              padding: EdgeInsets.all(8),
              child: Row(
                textDirection: TextDirection.rtl,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Text(" hello world ", style: TextStyle(fontSize: 30.0)),
                  Text(" I am Jack "),
                ],
              ),
            ),
            SizedBox(height: 10),

            // 第四个Row - 纵轴对齐
            Container(
              color: Colors.grey[200],
              padding: EdgeInsets.all(8),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                verticalDirection: VerticalDirection.up,
                children: <Widget>[
                  Text(" hello world ", style: TextStyle(fontSize: 30.0)),
                  Text(" I am Jack "),
                ],
              ),
            ),
            SizedBox(height: 20),

            // Column示例
            Text(
              'Column示例：',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),

            // 第一个Column - 默认居中对齐
            Container(
              color: Colors.grey[200],
              padding: EdgeInsets.all(8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[Text("hi"), Text("world")],
              ),
            ),
            SizedBox(height: 10),

            // 第二个Column - 使用ConstrainedBox强制宽度
            Container(
              color: Colors.grey[200],
              padding: EdgeInsets.all(8),
              child: ConstrainedBox(
                constraints: BoxConstraints(minWidth: double.infinity),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[Text("hi"), Text("world")],
                ),
              ),
            ),
            SizedBox(height: 20),

            // 特殊情况示例
            Text(
              '特殊情况示例：',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),

            // 嵌套Column示例
            Container(
              color: Colors.green,
              height: 200,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Container(
                      color: Colors.red,
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          Text("hello world "),
                          Text("I am Jack "),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(height: 10),

            // 使用Expanded的示例
            Container(
              color: Colors.green,
              height: 200,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        color: Colors.red,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text("hello world "),
                            Text("I am Jack "),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
